<template>
<div class="home-page">
  <a-layout>
    <a-layout-header>
      <h3>可视化项目汇总——webkubor</h3>
    </a-layout-header>
    <a-layout-content >
      <a-row class="page-content" :gutter="20" type="flex" align="middle">
        <a-col :span="8">
          <a-card title="动态地图" class="page-card">
            <a slot="extra" href="#" @click="$router.push('/earth')">了解更多</a>
            <img src="https://gitee.com/web-kubor/oss/raw/master/uPic/可视化.jpeg" @click="$router.push('/earth')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="简洁看板" class="page-card">
            <a slot="extra" href="#" @click="$router.push('/factory')">了解更多</a>
            <img src="https://gitee.com/web-kubor/oss/raw/master/uPic/工厂看板.jpg" @click="$router.push('/factory')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="生产看板" class="page-card">
            <a slot="extra" href="#" @click="$router.push('/analysis')">了解更多</a>
            <img src="https://gitee.com/web-kubor/oss/raw/master/uPic/生产看板.jpg" @click="$router.push('/analysis')">
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="中国地图下钻" class="page-card">
            <a slot="extra" href="#" @click="$router.push('/china')">了解更多</a>
            <img src="https://gitee.com/web-kubor/oss/raw/master/uPic/地图下钻.gif" @click="$router.push('/china')">
          </a-card>
        </a-col>
      </a-row>
    </a-layout-content>
    <a-layout-footer>
      作者邮箱:webkubor@163.com
    </a-layout-footer>
  </a-layout>
</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toOtherWeb(target) {
      location.href = target
    }
  },
}
</script>

<style lang="less" scoped>
.home-page {
  background: #F0F2F5;
  position: relative;
  .particles-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  h3 {
    margin-bottom: 16px;
    color: #ffffff;
  }

  .page-content {
    padding: 20px;
  }


  .page-card {
    cursor: pointer;
    margin: 10px 0;
    background: #ffffff;
  }

  img {
    width: 100%;
  }

  button {
    margin-top: 16px;
  }
}
</style>
